<template>
  <div class="wp-home">
    <span class="hpome">首页</span>
    <div class="nav">
      <router-link class="lnk-about" to="/about">关于</router-link>
    </div>
    
    <HomeBtx
      @myAdd="addFunc"
      @myDel="delFunc"
      :ctit="ste.ctit"
    />
    
    <div class="xbtnw">
      <input type="text" style="width: 100px;height:60px;" v-model="ste.msg">
      <button class="xcbtn" style="font-size:15px;color:#f68" @click="hdlReqG1">get请求</button>
      <button class="xcbtn" @click="hdlReqP1">post请求</button>
    </div>
  </div>
  
</template>

<script setup>
  import HomeBtx from '@comp/HomeBtx/HomeBtx.vue'
  import { ref, reactive, computed, toRefs, nextTick, provide } from 'vue'
  import { useRouter } from 'vue-router'
  import { gStore } from '@/stores'
  import * as api from '@/api/common.js'

  const router = useRouter()
  const gSte = gStore()

  const ste = reactive({
    msg: 'm1',
    ctit: 'initTit',
  })
  
  function addFunc(res) {
    ste.ctit = vio.rndS(10)
    console.log( res )
  }
  
  function delFunc(res) {
    console.log( res )
  }
  
  async function hdlReqG1() {
    const baseUrl = import.meta.env.VITE_APP_BASE_URL
    console.log( baseUrl )
    
    const res = await api.companyInfo()
    console.log( res.data.data )
  }
  async function hdlReqP1() {
    const { data: dt } = await api.companyInfo()
    console.log( dt.data )
  }
  
</script>

<style lang="less" scoped>
  .wp-home {
    .imw {
      margin-top: 20px;
    }
  }
  .xcbtn {
    padding: 8px 15px;
    border-radius: 2px;
    border: 1px solid #ddd;
    cursor: pointer;
    margin: 0 8px;
    outline: none;
    font-size: 14px;
    font-family: inherit;
  }
  .xbtnw {
    width: 600px;
    margin: 30px auto;
  }
  .nav {
    display: flex;
    justify-content: center;
    align-items: center;
    
    .lnk-about {
      font-size: 18px;
      color: #07e;
      text-decoration: underline;
    }
  }
  .hpome {
    font-size: 30px;
    margin-left: 100px;
    background: url("/img/i05.png") no-repeat;
  }
</style>
